<!doctype html>
<html>
<head>
	<title>Review & Commenting</title>

	<!-- CUSTOMIZATION: Make sure "../" URLs for href/src attributes are correct -->
	<link rel="stylesheet" type="text/css" href="../css/testplan.css" />
</head>

<body>

	<div class="navbar">
		<a href="./" title="show directory contents"><code>./</code> (show contents of this directory)</a>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="../" title="show directory contents"><code>../</code> (show contents of parent directory)</a>
	</div>
	<hr />
	<h1 class="test_title">Review & Commenting</h1>

	<h2 class="test_section">Setup actions before running tests</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li><strong>You'll need to run the application on a server that is integrated with sendmail. </strong>
			In fact, best to test on multiple server configurations because a large part of the user management and sendmail logic
			is stored in a server-dependent logic. The default build when pulling down sources from github
			uses a bare-bones user management system without hookup to sendmail. There is a special OSGi plugin
			specifically for http://maqetta.org that integrates with that server's user management system
			and sendmail. Company-specific builds are likely to add their own OSGi plugin to integrate with
			the company's LDAP and sendmail.</li>
		<li><strong>You'll need multiple logins for each test server. </strong>
			Best if there are at least 3 logins available (users A, B and C), each with their own separate email addresses,
			where you are able to process the mail for those email addresses. (e.g., Suppose you are John Smith.
			You might have these email addresses under your control: JohnSmith@MyCompany.Com, JohnSmith@me.com, JohnSmith@gmail.com.)
			For internal company LDAP environments, where people often cannot create dummy email addresses,
			it might be necessary to have 3 people work together on these tests.</li>
	</ol>

	<h2 class="test_section">Create a new review</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Login to the server as user A and open up the application.</li>
		<li>Invoke New Review... from the New menu at the top of the application.</li>
		<li>In the wizard that comes up, on the first pane, enter information for each field. Click on the Next button.</li>
		<li>On the second pane, double-click on Sample1.html to make it one of the selected files. Click on the Next button.</li>
		<li>On the third pane, enter the email addresses for users B and C. Click on the Publish button and watch the lower-right corner of the screen for a green popup message.</li>
		<ul>
			<li>As you type in the text field, selectable suggestions should be listed (assuming there's a match). A new search should occur (with some slight delay) with each keystroke.</li>
			<img src="images/reviewAndCommentingUserSuggestion.png" >
			<li>Once a user has been added to a review his photo should appear in the grid (on servers where the user management system includes photos). </li>
		</ul>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>Potentially after a few seconds, a green popup should appear saying that reviewers have been successfully invited.</li>
	</ol>

	<h2 class="test_section">Receiving a review invitation</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>As users A, B and C, login to your mail client and look for email review invitations.
		  <div class='expectedResults_subsection'>You should see an email review invitation that includes
		  	short explanation and a hyperlink for running the review software.</div>
		</li>
		<li>As user B, either using a different browser or a different computer,
			activate the hyperlink.
		  <div class='expectedResults_subsection'>You should be directed to the Maqetta server.
		  	In almost all cases, you will be prompted to create a new user or login as an existing user.
		  	In many systems (particularly http://maqetta.org) after completely the new user or login processes,
		  	you should be taken to the review UI rather than the page editor UI.</div>
		</li>
		<li>Once Maqetta UI appears, you should be taken directly to the review.
		  	<div class='expectedResults_subsection'>You should see:
			  	<ul>
			  		<li><i>Sample1.html.rev</i> in an open editor. </li>
			  		<li>Reviews palette brought to the front.</li>
			  		<li>Within the Reviews palette, the node for the review should be opened, and <i>Sample1.html.rev</i> 
			  			should be selected.</li>
			  		<li>Comments palette brought to the front.</li>
			  	</ul>
		  	</div>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See notes above.</li>
	</ol>

	<h2 class="test_section">Adding review comments and annotations</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Continuing as user B, in the Comments palette, click on the "add comment" icon on the toolbar.
			<div class='expectedResults_subsection'>A small comment entry form should appear just under the toolbar.</div>
			Enter some text for the subject and some text for the description. Click Submit.
			<div class='expectedResults_subsection'>The comment should be added to the top of the Comments palette
			with a solid color border (e.g., blue) with "Edit" and "Reply" hyperlinks at top.</div>
		</li>
		<li>Continuing as user B, in the Comments palette, click on the "add comment" icon again.
			Add a second comment, but before hitting Submit, add a circle/oval invitation to the page
			by clicking on the circle/oval icon and then dragging out a circle. After dragging the circle,
			verify that the circle can be moved and resized.
			<div class='expectedResults_subsection'>The circle should be the same color as the border shown
			on your comments in the Comments palette.</div>
		</li>
		<li>Continuing as user B, in the States palette, switch to the "Add Task" state.
			<div class='expectedResults_subsection'>The "Add new task" dialog should appear on canvas.</div>
			Add a 3rd comment, along with each of the other annotation types (text, rectangle, arrow).
			Verify the each of these annotations types can be moved and resized.
			Click Submit.</li>
		<li>In States palette, switch to "Task Added" state.
			<div class='expectedResults_subsection'>The annotations for the "Add Task" state should disappear.</div>
			In States palette, switch to "Normal" state.
			<div class='expectedResults_subsection'>The annotations for the "Add Task" state should continue to be hidden.</div>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See notes above.</li>
	</ol>
	
	<h2 class="test_section">Editing review comments and annotations</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>For one of the comments you've entered, click the <i>Edit</i> link to edit the comment.<div class='expectedResults_subsection'>A small comment entry form should appear just under the toolbar.</div>
			Change the text for the subject and the text for the description. Click Submit.
			<div class='expectedResults_subsection'>The comment should be updated.</div>
		</li>
		<li>For one of the comments you've entered with an annotation, click the <i>Edit</i> link to edit the comment.
			<div class='expectedResults_subsection'>A small comment entry form should appear just under the toolbar.</div>
			Select an annotation and click the <i>Delete</i> icon in the comments toolbar.
			<div class='expectedResults_subsection'>The annotation should disappear.</div>
			Add a new annotation. Click Submit.
			<div class='expectedResults_subsection'>The comment should be updated.</div>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See notes above.</li>
	</ol>

	<h2 class="test_section">Replying to comments from others</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>As user C, either using a different browser or a different computer,
			activate the hyperlink in the review invitation. Register and/or sign in and
			ultimately get to the review UI.</li>
		<li>Once reviewer UI appears, in the left-side Reviews palette, click on "+" to open up the latest review,
			and then double-click on Sample1.html.rev.
		  <div class='expectedResults_subsection'>The canvas should show Sample1.html. 
			You should see the comments and annotation(s) that user B added to Normal state.</div>
		</li>
		<li>In the States palette, go to the Add Task state.
		  <div class='expectedResults_subsection'>You should see the annotations that user B
		  	added to the "Add Task" state.</div>
		</li>
		<li>In the Comments palette, while in "Add Task" state, click on the "Reply" icon for the last comment.
			Add a descriptive comment and add a couple of annotations on the canvas. Click Submit.
		  <div class='expectedResults_subsection'>Your comment block should be indented under the original comment and
		  	have a different color border (e.g., green)
		  	and the same color should be used for annotations on the canvas.</div>
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See notes above.</li>
	</ol>

	<h2 class="test_section">Receiving comment notifications and checking comments</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>As user A, login to your mail client and look for notifications that comments have been added to your review.
		  <div class='expectedResults_subsection'>For each new comment, you should see an email that includes details about the 
		  	comment. In addition, there should be a link to your review (the same link that was 
		  	in the review invitation). It should look something like the screenshot below:</div>
		  	<img src="images/commentNotificationEmail.png" >
		</li>
		<li>As user A, open Maqetta either by:
			<ul>
				<li> clicking on the link in the notification e-mail</li>
				<li> going to Reviews palette, opening up the latest review session by clicking on "+", and then
					double-clicking on Sample1.html.rev. </li>
			</ul>
		  <div class='expectedResults_subsection'>The review should open in a new editor tab.</div></li>
		<li>Verify that the review comments from users B and C are visible, properly color-coded,
			and that different annotations appear/disappear as you change states in the States palette.
		</li>
		<li>Reload the browser page (using either browser refresh or logout/login) and verify that any reviews that were
			in editor tabs before the reload are reopened.
		</li>
	</ol>
	<h3 class="expectedResults_subsection">Expected results</h3>
	<ol class="expectedResults">
		<li>See notes above.</li>
	</ol>

	<h2 class="test_section">Working with reviews created both by you and by others</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Repeat all of the tests above, but have user B create the review and invite user A and user C.
			<div class='expectedResults_subsection'>
		  		<ul>
		  			<li>All of the expected results in the other sections.</li>
		  			<li>Within the Reviews palette:</li>
		  			<ul>
			  			<li>All users should see both of the reviews created during this testing.</li>
			  			<li>user A should see the review he created bolded, and the review user B created italicized.</li>
			  			<li>user B should see the review he created bolded, and the review user A created italicized.</li>
			  			<li>user C should see the reviews created by user A and user B italicized.</li>
			  		</ul>
		  		</ul>
		  	</div>
		 </li>
		<li>EXTRA CREDIT: Repeat all of the tests above, but now have user C create the review and invite user A and user B.
		</li>
	</ol>
	
	<h2 class="test_section">Editing Reviews</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>In the reviews palette, select the folder for one of the reviews you created earlier. 
			<div class='expectedResults_subsection'>Look at the review palette toolbar, and 
				you should see options for <i>Stop Review...</i>, <i>Start Review...</i> (disabled), and <i>Edit Review...</i>.</div>
		</li>
		<li>Click the <i>Edit Review...</i> button and the Edit Review Wizard should be invoked. 
			<div class='expectedResults_subsection'>This wizard is the same as the New Review Wizard, but pre-populated with the 
			settings from when you first created the review.</div>
		</li>
		<li>On the first panel of the wizard, ensure the data matches what you entered earlier. Change the title of the 
			review (e.g., to "My Changed Review"). Click Next.</li>
		<li>On the second panel of the wizard, ensure the list of files matches what you entered earlier. Add an 
			additional file (e.g., "Sample3-Mobile.html"). Click Next.</li>
		<li>On the third panel of the wizard, ensure the list of reviewers matches what you entered earlier. Add an 
			additional e-mail address. Click Publish.</li>
		<li>The same sorts of things that happen when you create a review should happen (e.g., e-mail gets sent out, etc.). 
			<div class='expectedResults_subsection'>Confirm that the tree in the Review Palette is updated with your new review 
			title. In addition, ensure that the new file is listed inside of the review folder.</div>
		</li>
		<li>Right click on the review you just edited.
			<div class='expectedResults_subsection'>You should see the following menu items: <i>Open</i> (disabled), <i>Edit...</i>, 
			<i>Start</i> (disabled), <i>Stop...</i>, <i>Delete...</i>, and <i>Republish...</i> (disabled)</div>
		</li>
		<li>Click the <i>Edit...</i> menu option and the Edit Review Wizard should be relaunched. Click cancel.</li>
		<li>Select the folder for a review created by another user.
			<div class='expectedResults_subsection'>Look at the review palette toolbar, and all of the buttons should be disabled.</div>
		</li>
		<li>Right-click the folder for a review created by another user.
			<div class='expectedResults_subsection'>All of the menu items should be disabled.</div>
		</li>
	</ol>
	
	<h2 class="test_section">Starting and Stopping Reviews</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>In the reviews palette, select the folder for one of the reviews you created earlier. 
			<div class='expectedResults_subsection'>Look at the review palette toolbar, and 
				you should see options for <i>Stop Review...</i>, <i>Start Review...</i> (disabled), and <i>Edit Review...</i>.</div>
		</li>
		<li>Click the <i>Stop Review...</i> button and click OK.. 
			<div class='expectedResults_subsection'>
				<ul>
					<li>An alert should show asking if you are sure you want to stop the review.</li>
					<li>After you click OK, you should see a message that the review was successfully stopped.</li>
					<li>The icon on the review in the tree should change to a stopped icon.</li>
				</ul>
			</div>
		</li>
		<li>Open the review you closed, and right-click on one of the files.
			<div class='expectedResults_subsection'>You should see the following menu items: <i>Open</i>, <i>Edit...</i>, 
			<i>Start</i>, <i>Stop...</i> (disabled), <i>Delete...</i>, and <i>Republish...</i> (disabled)</div>
		</li>
		<li>Select the <i>Open</i> menu item and the review should open.</li>
		<li>Go to the Comments Palette.
			<div class='expectedResults_subsection'>You should see all previously entered comments, but because the review is stopped
				you should not be able to add any new comments.</div>
		</li>
		<li>Back in the review palette, select the review and hit the Start button in the toolbar.
			<div class='expectedResults_subsection'>
				<ul>
					<li>You should see a message that the review was successfully started.</li>
					<li>The icon on the review in the tree should change to a started icon.</li>
				</ul>
			</div>
		</li>
		<li>Go to the Comments Palette.
			<div class='expectedResults_subsection'>Because the review is started, the Add Comment button should be renabled. And, you 
			should again be able to add a new comment.</div>
		</li>
	</ol>
	
	<h2 class="test_section">Deleting Reviews</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>In the reviews palette, select the folder for one of the reviews you created earlier. </li>
		<li>Right click and choose the <i>Delete...</i> menu option and click OK.. 
			<div class='expectedResults_subsection'>
				<ul>
					<li>An alert should show asking if you are sure you want to delete the review.</li>
					<li>After you click OK, you should see a message that the review was successfully deleted.</li>
					<li>The review folder and its contents should be removed from the tree in the review palette.</li>
				</ul>
			</div>
		</li>
	</ol>
	
	<h2 class="test_section">Saving a Review As a Draft</h2>
	<h3 class="steps_subsection">Steps</h3>
	<ol class="steps">
		<li>Repeat the steps to create a review from the <i>Create a new review</i> section, but instead of hitting
			the <b>Publish</b> button, click the <b>Save as draft</b> button.
			<div class='expectedResults_subsection'>
		  		<ul>
		  			<li>You should see a message that the review was succesfully saved as a draft.</li>
		  			<li>A node with a draft icon should be added to the tree in the review palette, and it should tagged with the word 
		  				"(Draft)".</li>
		  			<li>The node should switch to being a leaf node (e.g., you won't see files as children because it doesn't make sense
		  				to open files while a review is in draft mode).
		  			<li>No e-mail notifications should be received.</li>
		  		</ul>
		  	</div>
		 </li>
		 <li>With the draft review selected, click the Edit... button in the toolbar of the review palette.
			<div class='expectedResults_subsection'>
		  		<ul>
		  			<li>You should see Edit Review Wizard appear and populated with all of the data from when you saved as a draft.</li>
		  		</ul>
		  	</div>
		 </li>
		 <li>Click the Publish button in the wizard.
			<div class='expectedResults_subsection'>
		  		<ul>
		  			<li>The review should be published with e-mail notifications sent.</li>
		  			<li>The review entry in the tree should change from appearing as a draft to appearing as a normal review (e.g.,
		  				the icon should change and the "(Draft)" string should disappear.</li>
		  		</ul>
		  	</div>
		 </li>
	</ol>
</body>
</html>
